import React, { useState, useEffect } from 'react'
import { Button, Table, Radio, Breadcrumb, Modal } from "antd"
import { Link, Route } from 'react-router-dom'
import { CloudUploadOutlined, PrinterOutlined } from '@ant-design/icons';
import style from './index.module.scss'

export default function BankMoneyMange() {
    //分页
    const [pageAndSize, setPageAndSize] = useState({
        currentPage: 1,
        pageSize: 10
    })
    const [dataS, setDataS] = useState([])
    const columns = [
        {
            title: '账号',
            dataIndex: 'Income_num',
        },
        {
            title: '账户名称',
            dataIndex: 'Income_name',
        },
        {
            title: '开户银行',
            dataIndex: 'bank_name',
        },
        {
            title: '开户行',
            dataIndex: 'bank_customer',
        },
        {
            title: '币种',
            dataIndex: 'income_type',
        },
        {
            title: '账户类型',
            dataIndex: 'money_type',
        },
        {
            title: '收入',
            dataIndex: 'income',
        },
        {
            title: '支出',
            dataIndex: 'outcome',
        },
        {
            title: '更新日期',
            dataIndex: 'update_time',
        },
        {
            title: '状态',
            dataIndex: 'state',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text, record) => (
                <>
                    <Link to={{ pathname: '/home/bankMonyMangeEdit', record: record }}>编辑</Link>
                    <br></br>
                    <Link onClick={showModal}>删除</Link>
                    <br></br>
                    <Link>账户明细</Link>
                </>
            )
        },
    ];
    const data = [];
    useEffect(() => {
        for (let i = 0; i < 8; i++) {
            data.push({
                key: i,
                Income_num: Math.random(),
                Income_name: `xxx ${i}`,
                bank_name: '中国银行',
                bank_customer: '四川成都',
                income_type: '人民币',
                money_type: '基本账户',
                income: '234566',
                outcome: '4556',
                update_time: '2020-12-23',
                state: '使用中',

            });
        }
        setDataS(data)
    }, [])

    //获取分页
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setPageAndSize({
            currentPage: page,
            pageSize
        })
    }
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);

    };

    const handleOk = () => {
        setIsModalVisible(false);
        dataS.splice(0, 1)
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div>
            <Modal title="删除确定" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask maskClosable>
                <p>确认要删除该条数据吗？</p>
            </Modal>
            <Breadcrumb style={{ margin: '16px 0', display: "flex", justifyContent: "start" }}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>财务管理</Breadcrumb.Item>
                <Breadcrumb.Item>银行账户管理</Breadcrumb.Item>
            </Breadcrumb>
            <div className={style.pre_title}>
                <p>数据列表</p>
                <div>
                    <Button><Link to='/home/bankMonyMangeAdd'>添加</Link></Button>
                    <Radio.Button value="large" > <PrinterOutlined /> 打印</Radio.Button>
                    <Button><CloudUploadOutlined className="icon" />导出</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={dataS} pagination={{
                total: dataS.length,
                defaultPageSize: 5,
                showQuickJumper: true,
                showSizeChanger: true,
                pageSizeOptions: ['10', '20', '30'],
                showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                onChange: getPage
            }}
            />
        </div>
    )
}
